<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <title><?php echo $config['app']?>安装向导 - Powered by <?php echo $config['company']?></title>
    <link rel="stylesheet" href="<?php echo $this->assets('/static/install/css/install.css'); ?>" />
</head>

<body>
    <div class="wrap">
        <header>
            <div class="title">
                <span class="app"><?php echo $config['app']?></span> 安装向导
            </div>
            <div class="version"></div>
        </header>
        <div class="step">
            <ul>
                <li><span>1</span>检测环境</li>
                <li class="current"><span>2</span>创建数据</li>
                <li><span>3</span>完成安装</li>
            </ul>
        </div>
        <section class="content">
            <form action="<?php echo $this->container->url->build('/install', ['step' => 4]) ?>" method="post" id="form">
                <table class="m-table">
                    <caption>数据库配置</caption>
                    <thead>
                        <th width="140">数据库信息</th>
                        <th width="200">配置信息</th>
                        <th>描述</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-right">数据库服务器：</td>
                            <td><input type="text" name="host" required value="127.0.0.1" class="input"></td>
                            <td class="text-left text-grey">数据库服务器地址，一般为localhost</td>
                        </tr>
                        <tr>
                            <td class="text-right">数据库端口：</td>
                            <td><input type="number" required name="port" value="3306" class="input"></td>
                            <td class="text-left text-grey">数据库服务器端口，一般为3306</td>
                        </tr>
                        <tr>
                            <td class="text-right">数据库名：</td>
                            <td><input type="text" name="database" required value="" class="input"></td>
                            <td class="text-left text-grey">数据库库名</td>
                        </tr>
                        <tr>
                            <td class="text-right">数据库用户名：</td>
                            <td><input type="text" name="username" required value="root" class="input"></td>
                            <td class="text-left text-grey">数据库链接用户名</td>
                        </tr>
                        <tr>
                            <td class="text-right">数据库密码：</td>
                            <td><input type="password" name="password" required value="" class="input" autoComplete="off"></td>
                            <td class="text-left text-grey">数据库链接用密码</td>
                        </tr>
                    </tbody>
                </table>
                <table class="m-table">
                    <caption>应用配置</caption>
                    <thead>
                        <th width="140">应用信息</th>
                        <th width="200">配置信息</th>
                        <th>描述</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-right">WebSocket地址：</td>
                            <td><input type="text" required name="server_address" value="<?php echo 'ws://' . \FApi\Request::instance()->host() . ':8623'; ?>" class="input"></td>
                            <td class="text-left text-grey">WebSocket链接地址，使用ssl则需使用wss</td>
                        </tr>
                        <!-- <tr>
                            <td class="text-right">ticket加密秘钥：</td>
                            <td><input type="text" required name="ticket_salt" value="chat-csxd-2021" class="input"></td>
                            <td class="text-left text-grey">ticket加密秘钥</td>
                        </tr> -->
                        <tr>
                            <td class="text-right">访客称呼：</td>
                            <td><input type="text" name="chat_username" value="游客" class="input" required></td>
                            <td class="text-left text-grey">默认的游客称呼</td>
                        </tr>
                        <tr>
                            <td class="text-right">上传文件大小：</td>
                            <td><input type="number" name="chat_upload_maxsize" value="2000000" class="input" required></td>
                            <td class="text-left text-grey">客户端文件上传尺寸最大限制，单位：K </td>
                        </tr>
                        <tr>
                            <td class="text-right">上传文件类型：</td>
                            <td><input type="text" name="chat_upload_type" value="jpg,jpeg,png,gif" class="input" required></td>
                            <td class="text-left text-grey">客户端文件上传类型限制，“,”分割</td>
                        </tr>
                    </tbody>
                </table>
                <table class="m-table">
                    <caption>管理员配置</caption>
                    <thead>
                        <th width="140">管理员信息</th>
                        <th width="200">&nbsp;</th>
                        <th>描述</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-right">管理员帐号：</td>
                            <td><input type="text" required name="admin" value="admin" class="input"></td>
                            <td class="text-left text-grey">管理员登录账户</td>
                        </tr>
                        <tr>
                            <td class="text-right">管理员密码：</td>
                            <td><input type="password" name="admin_passwod" id="passwordAdmin" class="input" required autoComplete="off"></td>
                            <td class="text-left text-grey">管理员登录密码</td>
                        </tr>
                        <tr>
                            <td class="text-right">重复密码：</td>
                            <td><input type="password" name="admin_passwod_check" equal="passwordAdmin" class="input" required autoComplete="off"></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

                <div class="buttom">
                    <a href="<?php echo $this->container->url->build('/install', ['step' => 2]) ?>" class="btn">上一步</a>
                    <button class="btn" type="button" onclick="onSubmit()">创建数据</button>
                </div>
            </form>
        </section>
    </div>
    <footer class="footer">
        &copy; 2020-2021 <?php echo $config['company']?>
    </footer>
    <script>
        // 提交表单
        function onSubmit() {
            // 验证表单参数必须
            var requiredInput = document.querySelectorAll('input[required]')
            for (var i = 0, l = requiredInput.length; i < l; i++) {
                var input = requiredInput[i]
                if (input.value.trim() == '') {
                    input.focus()
                    input.style.borderColor = '#ff0000';
                    if (input.nextElementSibling == null) {
                        input.insertAdjacentHTML('afterEnd', '<div class="input-error">请填写配置信息</div>')
                    }
                    return false;
                } else {
                    input.style.borderColor = ''
                    if (input.nextElementSibling !== null) {
                        input.nextElementSibling.remove()
                    }
                }
            }
            // 验证表单值相等
            var equalInput = document.querySelectorAll('input[equal]')
            for (var i = 0, l = equalInput.length; i < l; i++) {
                var input = equalInput[i]
                var equalID = input.attributes.equal.value
                var equalElement = document.getElementById(equalID)
                if (input.value != equalElement.value) {
                    input.focus()
                    input.style.borderColor = '#ff0000';
                    equalElement.style.borderColor = '#ff0000';
                    if (input.nextElementSibling == null) {
                        input.insertAdjacentHTML('afterEnd', '<div class="input-error">内容不一致</div>')

                    }
                    return false;
                } else {
                    input.style.borderColor = ''
                    equalElement.style.borderColor = '';
                    if (input.nextElementSibling !== null) {
                        input.nextElementSibling.remove()
                    }
                }
            }

            // 表单提交
            document.getElementById('form').submit()
        }
    </script>
</body>

</html>